<template>
  <div class="display search-input-content">
    <div class="display search-input">
      <img src="@/assets/icon/sousuo@3x.png"
           class="search-icon"
           @click="handleSearch" />
      <input v-model="input_value"
             :placeholder="placeholder_value"
             class="search-input-value"
             @input="inputFn"
             @keyup.enter="handleSearch" />
    </div>
  </div>
</template>
<script>
export default {
	name: 'SearchInput',
	components: {},
	props: {
		placeholder_value: {
			//placeholder内容
			type: String,
			default: '',
		},
		search_type: {
			type: [String, Number],
			default: '',
		},
	},
	data() {
		return {
			input_value: '', //输入框model
			list: [
				{
					id: 1,
					name: '我',
				},
				{
					id: 2,
					name: '我是',
				},
				{
					id: 3,
					name: '我是谁',
				},
			],
			loading: false,
			finished: false,
		};
	},
	watch: {
		change_input_value(newName, oldName) {
			this.input_value = newName;
		},
	},
	mounted() {
		this.input_value = this.change_input_value;
		this.finished = true;
	},
	methods: {
		setValue(e) {
			this.input_value = e;
		},
		inputFn() {
			this.$emit('input', { value: this.input_value });
		},
		handleSearch() {
			if (this.$route.path !== '/searchPage') {
				this.$router.push({
					path: '/searchPage',
					query: { module_name: this.search_type, search_word: this.input_value },
				});
			}
			this.$emit('goSearch');
		},
		searchContent(id) {
			this.input_value = id;
		},
	},
};
</script>

<style lang="scss" scoped>
.search-input-content {
	display: flex;
	flex-direction: column;
	z-index: 98;

	.search-input {
		padding: 0.169082rem 0.169082rem 0.169082rem 0.362319rem;
		background-color: rgba(255, 255, 255, 0.8);
		width: 100%;
		height: 100%;
		font-size: 0.386473rem;
		border: 0.024155rem solid #6899f4;
		border-radius: 0.603865rem;
		box-sizing: border-box;

		.search-icon {
			width: 0.410628rem;
			height: 0.410628rem;
		}
		.search-input-value {
			// padding-left: 0.193237rem;
			margin-left: 0.193237rem;
			color: #545454;
			border: none;
			width: 100%;
		}

		.search-input-value::-webkit-input-placeholder {
			/* placeholder颜色  */
			color: #545454;
			font-size: 0.386473rem;
		}
		.search-input-value::-moz-placeholder {
			/* Mozilla Firefox 19+ */
			color: #545454;
			font-size: 0.386473rem;
		}
		.search-input-value:-moz-placeholder {
			/* Mozilla Firefox 4 to 18 */
			color: #545454;
			font-size: 0.386473rem;
		}
		.search-input-value:-ms-input-placeholder {
			/* Internet Explorer 10-11 */
			color: #545454;
			font-size: 0.386473rem;
		}
	}

	.search-list {
		width: 100%;
		background: white;
		border-radius: 0 0 0.241546rem 0.241546rem;

		.van-list {
			.van-cell {
				padding: 0 0.42667rem;
			}

			::v-deep .van-list__finished-text {
				line-height: 0.483092rem;
				font-size: 0.338164rem;
			}
		}
	}

	.top-header-fade-transform-leave-active,
	.top-header-fade-transform-enter-active {
		transition: all 0.5s;
	}
	.top-header-fade-transform-enter {
		opacity: 0;
	}
	.top-header-fade-transform-leave-to {
		opacity: 0;
	}
}
</style>